<template>
  <div>
    <!--导航栏-->
    <van-nav-bar
      :left-text="getCurrentTime()"
      :title="getNewDate()"
      fixed
      placeholder
    />
    <!--显示农历-->
    <p class="time">{{ getFullYear() }} {{ getFullDate() }}</p>
    <div style="height: 22px"></div>

    <!--进度条说明-->
    <div class="jdt"></div>
    <a class="bfb">{{ date.getFullYear() }} 年已过去 {{ Progress }}%</a>
    <div style="height: 10px"></div>

    <!--进度条-->
    <div style="width: 70%; margin: 0 auto">
      <el-progress
        :text-inside="true"
        :stroke-width="18"
        :percentage="Progress"
      ></el-progress>
      <p style="font-size: 9px; text-align: right">
        {{ this.PastDays }}/{{ this.TotalDays }}
      </p>
    </div>

    <!--循环日期模块-->
    <div style="height: 40px"></div>
    <div :key="i" v-for="(item, i) in Festival">
      <div class="mk" :style="item.background" @click="bwl(i)">
        <div>
          <div style="height: 18px; float: left; width: 95%; heigh: 10px"></div>
          <div
            style="float: right; color: white; width: 5%; heigh: 10px"
            @click="delect(i)"
            @click.stop="bwl"
          >
            ×&nbsp;&nbsp;
          </div>
        </div>
        <div>
          <div style="text-align: left; float: left">
            <a
              style="
                font-size: 20px;
                color: white;
                line-height: 2em;
                margin: 20px;
              "
              >{{ item.name }}</a
            ><br />
            <a
              style="
                font-size: 12px;
                color: #e7e7e7;
                line-height: 2em;
                margin: 20px;
              "
              >{{ item.date }}</a
            ><br />
            <a style="font-size: 12px; color: #e7e7e7; margin: 20px">{{
              item.full
            }}</a>
          </div>
          <div style="text-align: right; float: right">
            <a style="font-size: 12px; color: white">{{ item.str1 }}&nbsp;</a>
            <a style="font-size: 20px; color: white">{{ item.str2 }}&nbsp;</a>
            <a style="font-size: 12px; color: white"
              >{{ item.str3 }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a
            >
          </div>
        </div>
        <div style="height: 18px" @click="bwl(i)"></div>
      </div>
      <div style="height: 18px"></div>
    </div>

    <!--添加按钮，弹出弹框-->
    <el-button @click="drawer = true" type="primary" style="margin-left: 16px">
      添加纪念日
    </el-button>
    <!--弹框-->
    <el-drawer
      title="记录那些难忘的日子"
      :visible.sync="drawer"
      direction="btt"
      :before-close="handleClose"
    >
      <span>
        <el-input
          placeholder="请输入纪念日名称"
          v-model="iname"
          class="srk"
          clearable
          maxlength="10"
        >
        </el-input
        ><br /><br />
        <el-input
          placeholder="请输入纪念日日期"
          v-model="idate"
          class="srk"
          clearable
        >
        </el-input
        ><br /><br />
        <el-input
          placeholder="请输入备忘内容（选填）"
          v-model="ibw"
          class="srk"
          clearable
        >
        </el-input
        ><br /><br />
        <el-button type="primary" @click="add" :plain="true">确定</el-button
        ><br /><br />
        <a class="bfb">请选择背景:</a><br />
        <div :key="i" v-for="(item, i) in imeg">
          <img
            :src="item.url"
            alt=""
            style="width: 80%; height: 110px; max-width: 500px"
            @click="xz(i)"
          /><br />
        </div>
      </span>
    </el-drawer>
    <br /><br /><br /><br /><br /><br />
  </div>
</template>

<script>
import { getLunar } from "chinese-lunar-calendar";
import { NavBar } from "vant";
import { ActionSheet } from "vant";
export default {
  //顶栏
  components: {
    [NavBar.name]: NavBar,
  },
  data() {
    return {
      date: new Date(), // 当前日期实例化
      Progress: 0, // 进度条
      PastDays: 0, // 过去的天数
      TotalDays: 0, // 所有天数
      iname: "", //自定义添加标题
      idate: "", //自定义时间
      ibc: "", //自定义添加背景
      ibw: "", //输入备忘内容
      drawer: false,
      // 模拟数据
      Analog: [
        {
          name: "春节",
          date: "2023-1-22",
          bw: "在春节期间，全国各地均有举行各种贺岁活动",
          background: {
            // 背景图片地址
            backgroundImage: "url(" + require("../assets/festival/8.jpg") + ")",
            // 背景图片大小
            backgroundSize: "cover",
          },
        },
        {
          name: "与你相遇的日子",
          date: "2022-5-29",
          bw: "很开心能与你相遇",
          background: {
            backgroundImage: "url(" + require("../assets/custom/0.jpg") + ")",
            backgroundSize: "cover",
          },
        },
        {
          name: "父亲节",
          date: "2022-6-19",
          bw: "父爱在陈词旧话里，一字一句都是对我们的爱",
          background: {
            backgroundImage: "url(" + require("../assets/custom/1.jpg") + ")",
            backgroundSize: "cover",
          },
        },
        {
          name: "腊八节",
          date: "2022-12-30",
          bw: "泡腊八蒜、吃腊八面、煮腊八粥、吃腊八豆腐",
          background: {
            backgroundImage: "url(" + require("../assets/festival/6.jpg") + ")",
            backgroundSize: "cover",
          },
        },
      ],
      //存放自定义添加页的图片路径
      imeg: [
        {
          id: "0",
          url: require("../assets/custom/0.jpg"),
        },
        {
          id: "1",
          url: require("../assets/custom/1.jpg"),
        },
        {
          id: "2",
          url: require("../assets/custom/2.jpg"),
        },
        {
          id: "3",
          url: require("../assets/custom/3.jpg"),
        },
        {
          id: "4",
          url: require("../assets/custom/4.jpg"),
        },
        {
          id: "5",
          url: require("../assets/custom/5.jpg"),
        },
        {
          id: "6",
          url: require("../assets/custom/6.jpg"),
        },
        {
          id: "7",
          url: require("../assets/custom/7.jpg"),
        },
        {
          id: "8",
          url: require("../assets/custom/8.jpg"),
        },
        {
          id: "9",
          url: require("../assets/custom/9.jpg"),
        },
      ],
      Festival: [],
    };
  },
  created() {
    // 每0.1秒更新一次日期
    this.timer = setInterval(this.getTime, 100);
  },
  methods: {
    //当前日期
    getTime() {
      // 更新当前日期变量
      this.date = new Date();
      this.Progress = this.getProgress();
      this.Festival = this.getFestival();
    },

    // 获取农历年
    getFullYear(date = this.date) {
      return getLunar(date.getFullYear(), date.getMonth() + 1, date.getDate())
        .lunarYear;
    },

    // 获取农历日期
    getFullDate(date = this.date) {
      return getLunar(date.getFullYear(), date.getMonth() + 1, date.getDate())
        .dateStr;
    },

    // 获取新历日期
    getNewDate() {
      return (
        this.date.getFullYear() +
        "-" +
        (this.date.getMonth() + 1) +
        "-" +
        this.date.getDate()
      );
    },

    // 左上角当前时间
    getCurrentTime() {
      const hm = this.date.getHours() >= 12 ? "PM" : "AM";
      return (
        this.date.getHours() +
        ":" +
        this.date.getMinutes() +
        ":" +
        this.date.getSeconds() +
        " " +
        hm
      );
    },

    // 计算开始日期和结束日期差几天
    getBeginTime(begin, end) {
      const day =
        (new Date(end).getTime() - new Date(begin).getTime()) /
        (24 * 60 * 60 * 1000);
      return parseInt(day);
    },

    // 进度
    getProgress() {
      // 取当前 年份 1月1日做开始日期， 当前日期作为结束日期
      this.PastDays = this.getBeginTime(
        this.date.getFullYear() + "-1-1",
        this.getNewDate()
      );
      // 获取当前年天数
      this.TotalDays = this.getBeginTime(
        this.date.getFullYear() + "-1-1",
        this.date.getFullYear() + 1 + "-1-1"
      );
      // 结果保留两位小数
      return parseInt((this.PastDays / this.TotalDays) * 100);
    },

    // 遍历纪念日
    getFestival() {
      const temp = [];
      this.Analog.forEach((item) => {
        // 传入当前日期， 第二个是节日日期， 节日日期 - 当前日期是负数是已过 N天，否则是还有N天
        const days = this.getBeginTime(this.getNewDate(), item.date);
        // 计算农历
        const full = this.getFullDate(new Date(item.date));
        var str1, str2, str3;
        if (days < 0) {
          str1 = "已过";
          str2 = -days;
          str3 = "天";
        } else if (days == 0) {
          str1 = "正是";
          str2 = "今天";
        } else {
          str1 = "还有";
          str2 = days;
          str3 = "天";
        }

        const strs = {
          name: item.name,
          date: item.date,
          bw: item.bw,
          days: days,
          full: full,
          str1: str1,
          str2: str2,
          str3: str3,
          background: item.background,
          time: item.date,
        };
        temp.push(strs);
      });
      return temp;
    },

    //删除数据，从而删除div
    delect(i) {
      console.log(i);
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //删除语句
          this.Analog.splice(i, 1);
          this.$message({
            showClose: true,
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            showClose: true,
            type: "info",
            message: "已取消删除",
          });
        });
    },

    //关闭弹框
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },

    //点击出现备忘录提示
    bwl(i) {
      if (i >= 0 && this.Festival[i].bw != "") {
        this.$message({
          showClose: true,
          type: "success",
          message: this.Festival[i].bw,
          center: true,
        });
      } else if (i >= 0 && this.Festival[i].bw == "") {
        this.$message({
          showClose: true,
          message: "未添加备忘内容",
          center: true,
        });
      }
    },

    //添加页背景选择
    xz(i) {
      this.ibc = this.imeg[i].url;
      console.log(this.ibc);
      this.$message({
        showClose: true,
        type: "success",
        message: "选择成功!",
      });
    },

    //自定义添加纪念日
    add() {
      if (this.iname != "" && this.idate != "" && this.ibc != "") {
        const bc = {
          backgroundImage: "url(" + this.ibc + ")",
          backgroundSize: "cover",
        };
        const strs = {
          name: this.iname,
          date: this.idate,
          bw: this.ibw,
          background: bc,
        };
        this.Analog.push(strs);
        console.log(strs);
        console.log(this.Analog);

        //清空输入框
        this.iname = "";
        this.idate = "";
        this.ibc = "";
        this.ibw = "";

        //添加成功提示
        this.$message({
          showClose: true,
          message: "添加成功",
          type: "success",
        });
      } else if (this.iname != "" && this.idate != "" && this.ibc == "") {
        this.$message({
          showClose: true,
          message: "请选择背景",
          type: "warning",
        });
      } else {
        //添加失败
        this.$message.error({
          showClose: true,
          message: "添加失败，请完整输入",
        });
      }
    },
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer); // 在Vue实例销毁前，清除定时器
    }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.jdt {
  width: 70%;
  margin: 0 auto;
}
.bfb {
  color: #287553;
  font-size: 20px;
}
.time {
  font-size: 11px;
}
.mk {
  width: 80%;
  margin: 0px auto;
  border-radius: 10px;
  height: 110px;
}
.srk {
  width: 80%;
  max-width: 500px;
}
.el-popover {
  height: 500px;
  overflow: auto;
}
</style>

